<template>
	<view class="container">
		<!-- 头部 -->
		<myheader></myheader>
		
	

		<!-- 主体 -->
		<view class="mainbox">
			<!-- 左边列 -->
			<view class="column">
				<mypanel></mypanel>
				<mypanel></mypanel>
				<mypanel></mypanel>
			</view>

			<!-- 中间列 -->
			<view class="column">
				<myled></myled>
				<mymap></mymap>
			</view>

			<!-- 右边列 -->
			<view class="column">
				<mypanel></mypanel>
				<mypanel></mypanel>
				<mypanel></mypanel>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入组件
	import echarts from '../../components/echarts.vue'
	import mypanel from '../../components/mypanel.vue'
	import myheader from '../../components/myheader.vue'
	import myled from '../../components/myled.vue'
	import mymap from '../../components/mymap.vue'
	

	export default {
		data() {
			return {
				option1: {
					xAxis: {
						data: ["土豆", "西瓜", "西红柿", "牛奶", "粉丝", "茄子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [10, 20, 30, 40, 50, 60]
					}]
				},
				option2: {
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [60, 50, 30, 40, 20, 10]
					}]
				},
			}
		},
		// 注册组件
		components: {
			echarts,
			mypanel,
			myheader,
			myled,
			mymap
		}
	}
</script>

<style lang="less">
	// 全局配置
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	.container {
		background: url(../../static/images/bg.jpg) center top no-repeat;
		line-height: 1.15;

		// 主体
		.mainbox {
			// min-width: 1024px;
			max-width: 1920px;
			margin: 0 auto;
			padding: 20upx 20upx 0;
			display: flex;

			// 列： 共3列
			.column {
				flex: 3; 
			}

			.column:nth-child(2) {
				flex: 5;
			}			
		}
	}
</style>